<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>类型模板管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../plugins/select2/select2.css"/>
    <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css"/>
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
    <script src="../js/pages/public.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->

<div class="box-header with-border">
    <h3 class="box-title">商品类型模板管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" title="删除" onclick="deleteType()"><i
                            class="fa fa-trash-o"></i> 删除
                    </button>

                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">
                <form id="type">
                    分类模板名称：<input name="name">
                    <button class="btn btn-default" type="button" onclick="getType()">查询</button>
                </form>
            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">模板ID</th>
                <th class="sorting">分类模板名称</th>
                <th class="sorting">关联品牌</th>
                <th class="sorting">关联规格</th>
                <th class="sorting">扩展属性</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="aaa">

            </tbody>
        </table>
        <!--数据列表/-->
        <p>
            <a onclick="getByPage(1)">首页</a>
            <a onclick="getByPage(2)">上一页</a>
            当前第<input id="dang" name="pageNum" size="1" value="1">页数据/每页<input id="gong" name="pageSize" size="1"
                                                                               value="5">条数据
            <a onclick="getByPage(3)">下一页</a>
            <a onclick="getByPage(4)">末页</a>
        </p>

    </div>
    <!-- 数据表格 /-->


</div>
<!-- /.box-body -->


<!-- 新增窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">商品类型模板编辑</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>商品类型</td>
                        <td><input class="form-control" name="name" id="name" placeholder="商品类型"></td>
                    </tr>
                    <tr>
                        <td>关联品牌</td>
                        <td>
                            <select id="brand" style="width: 100%" multiple></select>
                        </td>
                    </tr>
                    <tr>
                        <td>关联规格</td>
                        <td>
                            <select id="spec" style="width: 100%" multiple></select>
                        </td>
                    </tr>

                    <tr>
                        <td>扩展属性</td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default" onclick="addBG()" title="新增扩展属性"><i
                                        class="fa fa-file-o"></i> 新增扩展属性
                                </button>

                            </div>
                            <table id="typeTable" class="table table-bordered table-striped" width="800px">
                                <thead>
                                <tr>
                                    <td><input type="checkbox" class="icheckbox_square-blue"></td>
                                    <td>属性名称</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody id="specadd">

                                </tbody>
                            </table>

                        </td>
                    </tr>

                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" onclick="savaType()" aria-hidden="true">保存</button>
                <button class="btn btn-default" data-dismiss="modal" onclick="window.location.reload();"
                        aria-hidden="true">关闭
                </button>
            </div>
        </div>
    </div>
</div>


<!--修改窗口-->
<div class="modal fade" id="editModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel1">商品类型模板编辑</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>商品类型</td>

                        <td>
                            <input type="hidden" name="id" id="upid">
                            <input class="form-control" placeholder="商品类型" name="name" id="upname"></td>
                    </tr>
                    <tr>
                        <td>关联品牌</td>
                        <td>
                            <select id="brand1" style="width: 100%" multiple></select>
                        </td>
                    </tr>
                    <tr>
                        <td>关联规格</td>
                        <td>
                            <select id="spec1" style="width: 100%" multiple></select>
                        </td>
                    </tr>

                    <tr>
                        <td>扩展属性</td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default" onclick="addBG()" title="新增扩展属性"><i
                                        class="fa fa-file-o"></i> 新增扩展属性
                                </button>

                            </div>
                            <table class="table table-bordered table-striped" width="800px">
                                <thead>
                                <tr>
                                    <td><input type="checkbox" class="icheckbox_square-blue"></td>
                                    <td>属性名称</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody id="typeUp">

                                </tbody>
                            </table>

                        </td>
                    </tr>

                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" onclick="update()" aria-hidden="true">保存</button>
                <button class="btn btn-default" data-dismiss="modal" onclick="window.location.reload()"
                        aria-hidden="true">关闭
                </button>
            </div>
        </div>
    </div>
</div>

</body>

<script>

    //增加bg
    function addBG() {
        var html = '';
        html += '<tr>'
        html += '	<td><input type="checkbox" class="icheckbox_square-blue"></td>'
        html += '	<td><input class="form-control" id="name1" placeholder="属性名称"></td>'
        html += '		<td>'
        html += '		<button type="button" class="btn btn-default" onclick="deleteThis(this)" title="删除"><i class="fa fa-trash-o"></i> 删除'
        html += '		</button>'
        html += '		</td>'
        html += '	</tr>'
        $("#specadd").append(html);
        $("#typeUp").append(html);
    }

    //删除bg
    function deleteThis(aa) {
        if (confirm("确定删除吗？")) {
            var tr = aa.parentNode.parentNode;//获取上一个节点,上一个节点,就是本节点的爷爷
            tr.parentNode.removeChild(tr);//爷爷的爷爷删除爷爷
        }
    }

    //获取关联品牌数据
    $.ajax({
        url: domain + '/brand/getAllBrand',
        dataType: "json",
        headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
        async: false,
        type: "get",
        success: function (result) {
            var html = '';
            if (result.code == 0) {
                // var html = '';
                $(result.data).each(function (i, e) {
                    html += '<option value="' + e.id + '">' + e.name + '</option>'
                })
                $("#brand").html(html);
                $("#brand1").html(html);
                $("#brand").select2();
                $("#brand1").select2();
            }
        }, error: function (result) {
            $("#brand").html("<tr><td>数据查询失败</td></tr>");
        }
    })


    //获取规格数据
    $.ajax({
        url: domain + '/spec/getAllSpec',
        dataType: "json",
        headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
        async: false,
        type: "post",
        success: function (result) {
            if (result.code == 0) {
                var r = result.data;
                var html = '';
                $(r).each(function (i, e) {
                    html += '<option value="' + e.id + '">' + e.specName + '</option>'
                })
                $("#spec").html(html);
                $("#spec1").html(html);
                $("#spec").select2();
                $("#spec1").select2();
            }
        }, error: function (result) {
            $("#spec").html("<tr><td>数据查询失败</td></tr>");
        }
    })


    function savaType() {
        /* brand*/
        var brandsList = $("#brand").select2('data');
        var arr = [];
        $(brandsList).each(function (i, e) {
            var brand = {id: e.id, text: e.text}
            arr.push(brand);
        })
        //把数组转成字符串
        var brand = JSON.stringify(arr);

        /*----------------------------------*/
        var specsList = $("#spec").select2('data');
        console.log(specsList);
        var arr1 = [];
        $(specsList).each(function (i, e) {
            var spec = {id: e.id, text: e.text}
            arr1.push(spec);
        })
        //把数组转成字符串
        var spec = JSON.stringify(arr1);

        //模板name
        var name1 = $("#name").val();

        //获取tabled对象 通过find搜索tr获取所有的行
        var trs = $("#typeTable").find("tr");
        var optionList = []; //js中表示集合数组
        for (var i = 1; i < trs.length; i++) {
            var tds = $(trs[i]).find("td");
            var option = {//在js中表示对象 json对象
                text: $(tds[1]).find("input").val(),
            }
            optionList.push(option);
        }
        var arrrr = JSON.stringify(optionList);

        var tbTypeTemplate = {};
        tbTypeTemplate['name'] = name1
        tbTypeTemplate['specIds'] = spec
        tbTypeTemplate['brandIds'] = brand
        tbTypeTemplate['customAttributeItems'] = arrrr
        $.ajax({
            url: domain + '/type/add',
            dataType: "json",
            data: JSON.stringify(tbTypeTemplate),
            contentType: "application/json; charset=utf-8",//这个是告诉后台我传的是json过去的
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type: "post",
            async: false,
            success: function (result) {
                if (result.code == 0) {
                    alert(result.message);
                    window.location.reload();
                }
            }, error: function (result) {
                alert("系统错误")
            }
        })
    }


    $(function () {
        getType();
    })


    function getType() {
        var parms = $("#type").serializeObject();
        var page = {
            "pageSize": $("#gong").val(),
            "pageNum": $("#dang").val(),
            "parm": parms
        }
        var token = window.localStorage.getItem("token")
        //查询信息
        $.ajax({
            url: domain + '/type/selectAll',
            dataType: "json",
            contentType: "application/json; charset=utf-8",//这个是告诉后台我传的是json过去的
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type: "post",
            async: false,
            data: JSON.stringify(page),
            success: function (result) {
                var data = result.data.rows;
                console.log(data)
                if (result.code == 0) {
                    var html = '';
                    $(data).each(function (i, e) {
                        var specids = JSON.parse(e.specIds);
                        var specid = '';
                        $(specids).each(function (i, e) {
                            specid += e.text + ",";
                        })
                        var text = specid.substring(0, specid.length - 1);

                        var brandIds = JSON.parse(e.brandIds);
                        var brandId = '';
                        $(brandIds).each(function (i, e) {
                            brandId += e.text + ',';
                        })
                        var brandIdText = brandId.substring(0, brandId.length - 1);

                        var customAttributeItems = JSON.parse(e.customAttributeItems);
                        var customAttributeItem = '';
                        $(customAttributeItems).each(function (i, e) {
                            customAttributeItem += e.text + ',';
                        })
                        var customAttributeItemText = customAttributeItem.substring(0, customAttributeItem.length - 1);

                        html += '	<tr>'
                        html += '	<td><input type="checkbox" name="box" value="' + e.id + '"></td>'
                        html += '	<td>' + e.id + '</td>'
                        html += '	<td>' + e.name + '</td>'
                        html += '  <td>' + brandIdText + '</td>'
                        html += '	<td>' + text + '</td>'
                        html += '	<td>' + customAttributeItemText + '</td>'
                        html += '	<td class="text-center"><button type="button" class="btn bg-olive btn-xs" data-toggle="modal"data-target="#editModal1" onclick="toupdate(' + e.id + ')">修改 </button></td></tr>'

                    })
                    $("#aaa").html(html);
                }
            },
            error: function (result) {
                alert("系统错误")
            }
        })
    }

    function getByPage(id) {
        var dang = $("#dang").val();
        var gong = $("#gong").val();
        if (id == 1) {//首页
            if (dang == 1) {
                return;
            } else {
                $("#dang").val(1);
            }
        } else if (id == 2) {//上一页
            if (dang == 1) {
                return;
            } else {
                $("#dang").val(parseInt(dang) - 1);
            }
        } else if (id == 3) {//下一页
            if (dang == gong) {
                return;
            } else {
                $("#dang").val(parseInt(dang) + 1);
            }
        } else if (id == 4) {//末页
            if (dang == gong) {
                return;
            } else {
                $("#dang").val(gong);
            }
        }
        getType();
    }

    //删除
    function deleteType() {
        var ids = []  //定义一个数组
        $("[type=checkbox]").each(function (i, e) {   //获取所有复选框的value,循环
            if ($(e).prop("checked")) {   //判断是否被选中
                ids.push($(e).val())  //选中就添加到数组中
            }
        })
        $.ajax({
            url: domain + '/type/delete',
            contentType: "application/json; charset=utf-8",//这个是告诉后台我传的是json过去的
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            dataType: "json",
            data:JSON.stringify(ids),
            type: "delete",
            async: false,
            success: function (result) {
                var data = result.data;
                if (result.code == 0) {
                    alert(result.message)
                    window.location.reload();
                }
            },
            error: function (result) {
                alert("系统错误")
            }
        })
    }


    //修改
    function toupdate(id) {
        $.ajax({
            url: domain + '/type/selectById?id=' + id,
            dataType: "json",
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type: "post",
            async: false,
            success: function (result) {
                var data = result.data;
                console.log(data)
                if (result.code == 0) {
                    /*------------------------------------*/
                    $("#upid").val(data.id);
                    $("#upname").val(data.name);
                    /*------------------------------------*/
                    var customJson = JSON.parse(data.customAttributeItems);
                    console.log(customJson);
                    var html = '';
                    $(customJson).each(function (i, e) {
                        html += '<tr>'
                        html += '<td><input type="checkbox" class="icheckbox_square-blue" ></td>'
                        html += '<td><input class="form-control" value="' + e.text + '" placeholder="属性名称" ></td>'
                        html += '<td><button type="button" class="btn btn-default" onclick="deleteThis(this)" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>'
                        html += '</tr>'
                    })
                    $("#typeUp").html(html);

                    /*------------------------------------*/
                    $("#brand1").select2();
                    $("#spec1").select2();
                    /*------------------------------------*/
                    var brand = JSON.parse(data.brandIds);
                    var arr = []
                    $(brand).each(function (i, e) {
                        arr.push(e.id)
                    })
                    $("#brand1").val(arr).trigger('change')

                    /*------------------------------------*/
                    var spec = JSON.parse(data.specIds);
                    var specarr = []
                    $(spec).each(function (i, e) {
                        specarr.push(e.id)
                    })
                    $("#spec1").val(specarr).trigger('change')

                }
            },
            error: function (result) {
                alert("系统错误")
            }
        })
    }

    function update(id) {
        //id
        var id = $("#upid").val();
        //name
        var name = $("#upname").val();

        //获取品牌
        var brandList = $("#brand1").select2('data');
        var brandArr = [];
        $(brandList).each(function (i, e) {
            var brand = {id: e.id, text: e.text}
            brandArr.push(brand);
        })
        //数组转json
        var brandIds = JSON.stringify(brandArr);

        /*==================================*/
        //获取规格
        var specList = $("#spec1").select2('data');
        var specArr = [];
        $(specList).each(function (i, e) {
            var spec = {id: e.id, text: e.text}
            specArr.push(spec);
        })
        //数组转json
        var specIds = JSON.stringify(specArr);


        /*====================================*/
        //扩展属性

        var trs = $("#typeUp").find('tr');
        var customAttributeItems = []
        $(trs).each(function (i, e) {
            var tds = $(e).find('td')
            var text = $(tds[1]).find('input').val()
            var a = {text: text}
            customAttributeItems.push(a)
        })
        var customAttributeItems = JSON.stringify(customAttributeItems);

        var tbTypeTemplate = {};
        tbTypeTemplate['id'] = id
        tbTypeTemplate['name'] = name
        tbTypeTemplate['specIds'] = specIds
        tbTypeTemplate['brandIds'] = brandIds
        tbTypeTemplate['customAttributeItems'] = customAttributeItems
        // console.log(tbTypeTemplate)
        $.ajax({
            url: domain + '/type/update',
            dataType: "json",
            data: JSON.stringify(tbTypeTemplate),
            contentType: "application/json; charset=utf-8",//这个是告诉后台我传的是json过去的
            headers: {"AutharizeToken":token,"Content-Type":"application/json;charset=UTF-8"},
            type: "put",
            async: false,
            success: function (result) {
                if (result.code == 0) {
                    alert(result.message);
                    window.location.reload();
                }
            }, error: function (result) {
                alert("系统错误")
            }
        })


    }

</script>

</html>